<template>
  <div>
    <el-button type="success" round @click="toAdd(0)">新增仓库</el-button>
    <el-table
      :data="tableName"
      border
      :stripe="true"
      highlight-current-row
      :header-cell-style="{ backgroundColor: '#f9f6ee' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column
        v-for="(item,index) in arr"
        :key="index"
        :label="item"
        :prop="tableObj[item]"
        width="150"
        align="center"
      >
        <template v-if="item === '仓库类型'" #default="{ row }">
          {{ typeMap[row.type] }}
        </template>
        <template v-else-if="item === '仓库状态'||item ==='库区状态'||item ==='停用状态'" #default="{ row }">
          {{ statesMap[row.status] }}
        </template>
        <template v-else-if="item ==='温度类型'" #default="{row}">
            {{ temperature[row.temperatureType] }}
          </template>
          <template v-else-if="item ==='承重类型'" #default="{row}">
            {{ bearType[row.bearingType] }}
          </template>
          <template v-else-if="item ==='用途属性'" #default="{row}">
            {{ useType[row.useType] }}
          </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="300"
        align="center"
      >
        <template #default="{row}">
          <el-button type="warning" plain @click="toAdd(row.id)">编辑</el-button>
          <el-button v-if="row.status !== 0" type="warning" plain @click="stopBtn(row)">停用</el-button>
          <el-button v-else type="warning" plain @click="stopBtn(row)">启用</el-button>
          <el-button type="warning" plain @click="delFn(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <startDialog
      :is-show="isShow"
      :row="rows"
      :form="form"
      @closeBtn="closeBtn"
      @publicFn="publicFn"
    />
  </div>
</template>

<script>
import startDialog from '@/components/Public/startDialog.vue'
export default {
  components: { startDialog },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    tableObj: {
      type: Object,
      default: () => {}
    },
    arr: {
      type: Array,
      default: () => {}
    },
    tableName: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      useType: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      },
      statesMap: {
        0: '停用',
        1: '启用'
      },
      bearType: {
        ZX: '重型',
        BX: '中型',
        QX: '轻型'
      },
      temperature: {
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      typeMap: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      isShow: false,
      rows: {}
    }
  },
  methods: {
    // 点击新增/编辑
    toAdd(val) {
      this.$router.push({
        name: 'warehouse_details',
        params: {
          id: val || 'null'
        }
      })
    },
    // 提交更新表单
    publicFn() {
      this.$emit('publicFn', this.form)
    },
    // 关闭dialog
    closeBtn() {
      this.isShow = false
    },
    // 显示dialog
    stopBtn(row) {
      this.isShow = true
      this.rows = row
    },
    // 删除
    delFn(row) {
      this.$emit('delFn', row)
    }
  }
}
</script>

<style>

</style>
